<template>
	<view class="home bg-white">
		<cu-navbar bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">验证码登录</block>
		</cu-navbar>
		<view class="login">
			<view class="text-center logo" style="filter: drop-shadow(0 0 10px rgba(0,0,0,0.1))">
				<image src="../../static/logo.png" mode="widthFix"></image>
			</view>
			<view class="text-left">
				<view class="cu-form-group">
					<view class="title">
						<text class="icon-mobilefill"></text>
					</view>
					<input type="number" v-model="mobile" placeholder="请输入您的手机号码" />
				</view>
				
				<view class='cu-form-group'>
					<view class="title">
						<text class="icon-safe"></text>
					</view>
					<input type="number" placeholder="短信验证码" v-model="captcha"></input>
					<button class='cu-btn line-mauve shadow' @click="checking" v-if="state===false">获取验证码</button>
					<button class='cu-btn line-mauve shadow' v-if="state===true">倒计时{{ currentTime }}s</button>
				</view>	
				
				<view class="submit flex">
					<button class="flex-sub cu-btn bg-gradual-pink round lg block shadow" @click="submit">登录</button>					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				captcha: '',
				state: false, //是否开启倒计时
				totalTime: 60, //总时间，单位秒
				recordingTime: 0, //记录时间变量
				currentTime: 0, //显示时间变量
				wx_user_id: 0,
				inviter: 0				
			}
		},
		methods: {			
			checking() {
				//把显示时间设为总时间
				this.currentTime = this.totalTime;
				this.smsSend((res) => {
					if (res) {
						this.$cu.toast('发送成功');
						//开始倒计时
						this.state = true;
						//执行倒计时
						this.checkingTime();
					}else{
						this.$cu.toast('发送失败');
					}
				})
			},
			checkingTime() {
				let that = this;
				//判断是否开启
				if (this.state) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => {
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.state = false; //关闭倒计时
						this.recordingTime = 0; //记录时间为0
						this.currentTime = this.totalTime; //显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.state = false;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			},
			smsSend: async function(callBack) {
				if (!this.$cu.isMobile(this.mobile)) {
					this.$cu.toast('手机号码格式错误！');
					return;
				}
				let rest = await this.$api.sendSmsCode({
					mobile: this.mobile					
				});
				callBack(!rest.code);				
			},
			submit: async function() {
				if (!this.$cu.isMobile(this.mobile)) {
					this.$cu.toast('手机号码格式错误！');
					return;
				}
				if (this.captcha == '') {
					this.$cu.toast('请输入验证码！');
					return;
				}
				let res = await this.$api.mobileLogin({
					mobile: this.mobile,
					code: this.captcha					
				});
				this.$cu.toast(res.msg);
				if (!res.code) {
					this.success(res);					
				}
			}
		}
	}
</script>

<style lang="scss">
	.home {
		height: 100vh;

		.login {
			.logo{
				padding: 100rpx 0;
			}
			image {
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
			}
			.submit{
				padding: 200rpx 60rpx 0;
			}
		}
	}
</style>
